<template>
  <view class="page">
    <fu-loading v-if="!initSteps"></fu-loading>
    <view v-else>
      <!-- 进度 -->
      <view class="" v-if='initSteps'>
        <view class="fu-bgcred fu-bgcred1">
          <image :src="imgWechatUrl+'/order/afterorder-bg.png'" mode="widthFix" class="img"></image>
          <block v-if="afterInfo.status >= 0">
            <uni-steps :options="steps" :active="speed" activeColor="#ffffff" deactiveColor="#ffffff"></uni-steps>
          </block>
        </view>
      </view>
      <view class="margin-lr-24 radius-16 bg-white padding afterStatus" :class="afterInfo.status < 0 ?'up':''"
        style="margin-bottom: 24rpx;">
        <view class="text-lg text-333 text-weight-600">
          <text v-if="afterInfo.status == -2">{{i18n['售后关闭']}}</text>
          <text v-if="afterInfo.status == -1">{{i18n['商家驳回']}}</text>
        </view>
				<block v-if="afterInfo.status == -1">
				  <view class="text-sm text-weight-500 text-666 margin-top-16">{{afterInfo.refund_reject}}</view>
				</block>
        <block v-if="afterInfo.status == -2">
          <view class="text-sm text-weight-500 text-2f margin-top-10">{{i18n['撤销时间']}}:{{ afterInfo.cancel_time }}</view>
          <view class="text-sm text-weight-500 text-666 margin-top-16">{{i18n['您已撤销本次退款申请，如有问题未解决，您可重新发起申请']}}</view>
        </block>
        <!-- 退款 -->
        <block v-if="afterInfo.refund_type == 1">
          <view class="text-lg text-333 text-weight-600">
            <text v-if="afterInfo.status == 0">{{i18n['请等待商家处理']}}</text>
            <text v-if="afterInfo.status == 3">{{i18n['售后已完成']}}</text>
          </view>
          <block v-if="afterInfo.status == 0">
            <view class="text-sm text-weight-500 text-2f margin-top-10">{{i18n['您已成功发起退款申请，请耐心等待商家处理。']}}</view>
            <view class="text-sm text-weight-500 text-666 margin-top-16">{{i18n['商家同意，系统将退款给您']}}</view>
          </block>
        </block>
        <!-- 退货退款 -->
        <block v-if="afterInfo.refund_type == 2">
          <view class="text-lg text-333 text-weight-600">
            <text v-if="afterInfo.status == 0">{{i18n['请等待商家处理']}}</text>
            <text v-if="afterInfo.status == 1">{{i18n['请寄回商品']}}</text>
            <text v-if="afterInfo.status == 2">{{i18n['请等待商家退款']}}</text>
            <text v-if="afterInfo.status == 3">{{i18n['售后已完成']}}</text>
          </view>
          <view class="text-sm text-weight-500 text-2f margin-top-10">
            <text v-if="afterInfo.status == 0">{{i18n['您已成功发起退款申请，请耐心等待商家处理。']}}</text>
            <text v-if="afterInfo.status == 1">{{i18n['商家已同意退货申请，请寄回商品并提交物流信息。']}}</text>
            <text v-if="afterInfo.status == 2">{{i18n['商品已寄回，请等待商家收货并退款。']}}</text>
          </view>
          <view class="text-sm text-weight-500 text-666 margin-top-16">
            <text v-if="afterInfo.status == 0">{{i18n['商家同意后，请按照给出的退货地址退货，并请填写退货运单号进行提交。']}}</text>
            <text v-if="afterInfo.status == 1">{{i18n['未与商家协商一致，请勿使用到付或者平邮，以免商家拒收。']}}</text>
            <text v-if="afterInfo.status == 2">{{i18n['如果商家收到货并验货无误，将操作退款给您。钱款原路返回至您支付时选择的账户。']}}</text>
          </view>
          <view class="text-sm text-weight-500 text-666 margin-top-14">
            <text v-if="afterInfo.status == 1">{{i18n['请填写真实的退货物流信息，逾期未填写，退货申请将自动关闭。']}}</text>
            <!-- <text v-if="status == 2">商品已寄回，请等待商家收货并退款。</text> -->
          </view>
        </block>
        <!-- 换货 2021-6-18 换货没有设计图 -->
        <block v-if="afterInfo.refund_type == 3">
          <!-- <view class="text-lg text-333 text-weight-600">{{ statusStr }}</view>
          <view class="text-sm text-weight-500 text-2f margin-top-10">
            您已成功发起退款申请，请耐心等待商家处理。
          </view>
          <view class="text-sm text-weight-500 text-666 margin-top-16">
            商家同意，系统将退款给您
          </view> -->
        </block>
      </view>
      <!-- 寄回地址  -->
      <view class="padding-lr-24 posZindex" v-if="afterInfo.status == 1 || afterInfo.status == 2"
        style="margin-bottom: 24rpx;">
        <view class="radius-16 bg-white backAddress">
          <view class="comment-title">
            {{i18n['寄回地址']}}
          </view>
          <view class="list-item flex align-center">
            <view class="title">{{ i18n['收货人'] }}</view>
            <view class="text-sm text-333 text-weight-400">{{ afterInfo && afterInfo.receiver_name }}</view>
          </view>
          <view class="list-item flex align-center">
            <view class="title">{{ i18n['联系电话'] }}</view>
            <view class="text-sm text-333 text-weight-400">{{ afterInfo && afterInfo.receiver_mobile }}</view>
          </view>
          <view class="list-item flex">
            <view class="title">{{ i18n['退货地址'] }}</view>
            <view class="text-sm flex flex-direction text-333 text-weight-400">
              <text>{{ afterInfo && afterInfo.receiver_address }}</text>
              <text class="text-sm margin-top-10 text-2f" @click="copyInfo(afterInfo.receiver_address)">{{i18n['复制']}}</text>
            </view>
          </view>
          <!-- <view class="list-item">
            <text class="title">{{ i18n['快递名称'] }}</text>
            <text class="text-sm">{{ afterExp && afterExp.express_company_name }}</text>
          </view>
          <view class="list-item">
            <text class="title">{{ i18n['快递单号'] }}</text>
            <text class="text-sm">{{ afterExp && afterExp.express_no }}</text>
          </view> -->
        </view>
      </view>
      <!-- 退款信息 -->
      <view class="padding-lr-24 posZindex" v-if="refundInfoShow">
        <view class="radius-16 bg-white backAddress">
          <view class="comment-title-1">
            {{i18n['商家已退款']}}
          </view>
          <view class="list-item flex ">
            <view class="title">{{ i18n['退款金额'] }}</view>
            <view class="text-sm text-333 text-weight-400">￥{{refund_money}}</view>
          </view>
          <view class="list-item flex">
            <view class="title">{{ i18n['退款账户'] }}</view>
            <view class="text-sm text-333 text-weight-400">{{refund_account}}</view>
          </view>
          <view class="list-item flex">
            <view class="title">{{ i18n['退款时间'] }}</view>
            <view class="text-sm flex flex-direction  text-333 text-weight-400">
              <text>{{refund_time | parseTime}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 商品信息 -->
      <view class="padding-lr-24 margin-top-sm posZindex" v-if="afterInfo && afterInfo.goods_id">
        <view class="radius-16 bg-white padding">
          <!-- <view class="text-bold text-333 text-df">{{ i18n['商品信息'] }}</view> -->
          <view class="comment-title">
            {{i18n['退款信息']}}
          </view>
          <view class="flex padding-bottom-sm solid-bottom" @click="navToDetail">
            <view class="block-200 margin-right-sm radius overHidden">
              <fu-image :src="afterInfo.goods_thumb" mode="aspectFill"></fu-image>
            </view>
            <view class="flex-sub flex flex-direction justify-between" style="width: 438rpx;">
              <view class="">
                <view class="text-df text-cut-2 text-333 text-weight-500">{{ afterInfo.goods_name }}</view>
                <view v-if="afterInfo.sku_name"
                  class="text-sm text-cut margin-top-8 text-999 text-weight-400">{{ afterInfo.sku_name }}</view>
                <!-- <view  class="text-sm text-cut margin-top-8 text-999 text-weight-400">提亮，抗初老</view> -->
              </view>
              <view class="flex justify-between">
                <text class="text-sm">
                  <!-- <text class="text-999 margin-right-xs">{{ i18n['实际支付'] }}:</text> -->
                  <text class="text-bold text-lg text-price text-red">{{ afterInfo.shop_price }}</text>
                </text>
                <text class="text-sm margin-left">
                  <!-- <text class="text-999 margin-right-xs">{{ i18n['申请数量'] }}:</text> -->
                  <text class="text-weight-400 text-999">x{{ afterInfo.num }}</text>
                </text>
              </view>
            </view>
          </view>
          <view class="list-item padding-top-sm">
            <text class="title">{{ i18n['服务类型'] }}</text>
            <text class="text-sm">{{ afterInfo && afterInfo.refund_type_title }}</text>
          </view>
					<view class="list-item">
					  <text class="title">退款金额</text>
					  <text class="text-sm text-price">{{ afterInfo && afterInfo.refund_money }}</text>
					</view>
          <view class="list-item flex">
            <text class="title">{{ i18n['退款原因'] }}</text>
            <text class="text-sm word-break-all">{{ afterInfo && afterInfo.refund_content }}</text>
          </view>
          <view class="list-item">
            <text class="title">{{ i18n['申请时间'] }}</text>
            <text class="text-sm">{{ afterInfo && afterInfo.create_time }}</text>
          </view>
          <view class="list-item ">
            <text class="title">{{ i18n['退款编号'] }}</text>
            <text class="text-sm">{{ afterInfo && afterInfo.server_no }}</text>
            <text class="text-sm text-2f margin-left" @click="copyInfo(afterInfo.server_no)">{{ i18n['复制'] }}</text>
          </view>
          <view class="list-item flex align-start" v-if="afterInfo && afterInfo.refund_picture.length != 0">
            <view class="title">{{ i18n['退款凭证'] }}</view>
            <view class="flex">
              <view class="img-wrap" v-for="(item, index) in afterInfo.refund_picture" :key="index" @click="previewImage(index)">
                <fu-image :src="item" mode="aspectFill"></fu-image>
              </view>
            </view>
          </view>
          <view class="list-item " v-if="(afterInfo.refund_type == '2' || afterInfo.refund_type == '3') && afterInfo.express_no">
            <text class="title">{{ i18n['物流单号'] }}</text>
            <text class="text-sm">{{afterInfo.express_no}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="padding-lr margin-top-sm" v-if="imgs.length != 0">
      <view class="radius-16 bg-white padding">
        <view class="text-bold text-333 text-df">{{ i18n['退款凭证照片'] }}</view>
        <view class="margin-top-sm flex flex-wrap">
          <view class="block-200 margin-right-sm margin-top-sm" v-for="(item, index) in imgs" :key="index" @click="previewImage(index)">
            <image class="radius" :src="item" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 退货订单的物流信息 start -->
    <!-- <view v-if="physical.length > 0" class="fu-back-acrgo">
      <view class="cu-timeline margin-top-sm padding-left-sm fu-back-acrgo">
        <view class="cu-time">{{ i18n['物流信息'] }}</view>
        <view class="cu-item text-blue" v-for="(item, index) in physical" :key="index">
          <view class="">{{ item.AcceptTime }}</view>
          <view class=" content">
            <text>{{ item.AcceptStation }}</text>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 退货订单的物流信息 end -->
    <view class="solid-top bottom-action flex justify-between align-center">
      <view class=" kefu" @tap="toCustomer()">
        <image :src="imgWechatUrl+'/order/phone.png'" mode="widthFix" class="img"></image>
        <text>{{i18n['联系平台']}}</text>
      </view>
      <view class="">
          <button v-if="status == -1" class="cu-btn line-black round sm text-white add"  @click="toAftermarket(orderInfo)"
          >{{ i18n['发起售后'] }}</button>
        <button v-if="(afterInfo.status == 0 && afterInfo.refund_type == '1')" class="cu-btn line-black round sm text-white add"
          @click="cancelAfter">{{ i18n['撤销申请'] }}</button>
        <button v-if="(afterInfo.status == 0 || afterInfo.status == 1) && afterInfo.refund_type == '2' && !afterInfo.express_no"
          class="cu-btn line-black round sm text-white add" @click="cancelAfter">{{ i18n['撤销申请'] }}</button>
        <button
          v-if="afterInfo.status == 1 && (afterInfo.refund_type == '2' || afterInfo.refund_type == '3') && !afterInfo.express_no"
          class="cu-btn line-black round sm text-white margin-left-sm add" @click="sendLog">
          {{ i18n['寄回商品'] }}
        </button>
        <button
          v-if="(afterInfo.status == 1 && afterInfo.express_no) || afterInfo.status == 2 && (afterInfo.refund_type == '2' || afterInfo.refund_type == '3') "
          class="cu-btn line-black round sm text-white margin-left-sm add" @click="lookLog">
          {{ i18n['查看物流'] }}
        </button>
        <button v-if="afterInfo.status == 3 || afterInfo.status == -1 || afterInfo.status == -2"
          class="cu-btn line-black round sm text-white margin-left-sm add" @click="delOrder">
          {{ i18n['删除订单'] }}
        </button>
        <!-- <button class="cu-btn margin-tb-sm round line-theme margin-left-sm sm" @tap="toCustomer()">{{ i18n['联系客服'] }}</button> -->
      </view>

    </view>
    <view class="back-success-wrap" v-if="backSuccessShow">
      <view class="mask" @click="backSuccessShow = false">

      </view>
      <view class="back-content flex flex-direction justify-between align-center">
        <view class="back-content-info bg-white flex flex-direction justify-between align-center">
          <view class="cuIcon-roundcheckfill text-4d text">

          </view>
          <view class="back-success text-333 text-xl text-weight-500">
            {{i18n['撤销申请成功']}}
          </view>
        </view>
        <view class="cuIcon-roundclose text-white text-xxl  text-62" @click="backSuccessShow = false">

        </view>
      </view>
    </view>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        initSteps: false,
				imgWechatUrl:this.imgWechatUrl,
        id: null,
        steps: [
          {
            title: global.i18n['提交申请']
          },
          {
            title: global.i18n['商家审核']
          },
          {
            title: global.i18n['商家收货']
          },
          {
            title: global.i18n['退款']
          },
          {
            title: global.i18n['完成']
          }
        ],
        speed: 0,
        afterExp: { express_no: 0 },
        status: 0,
        statusStr: '',
        goods_id: 0,
        sku_id: 0,
        physical: [], // {Array} 换货订单物流信息
        backSuccessShow: false,
        updata_time: 0,//撤销时间
        refund_time: 0,//退款时间
        refund_money: 0,//退款金额
        refund_account: '',//退款账户
        order_sn:'',
				afterInfo: {}, // 售后订单详情信息
				goodsInfo: {}, // 退款商品信息
				itemIndex:'', // 列表订单索引
				index: '',
      };
    },
    computed: {
      refundInfoShow() {
        let flag = false;
        // 不能不判断，后续可能会有换货，换货现在没有原型图，不太清楚流程
        if (this.afterInfo.refund_type == 1 || this.afterInfo.refund_type == 2) {
          if (this.status == 3) {
            flag = true;
          }
        }
        return flag;
      }
    },
    onShow() {
      setTimeout(() => {
        this.getData();
      }, 500);
    },
    onLoad(options) {
      this.setNavigationBarTitle(this.i18n['售后详情']);
      const { id, itemIndex } = options;
      this.id = id;
      this.itemIndex = itemIndex;
    },
    methods: {
       // 发起售后
       toAftermarket(item){
        console.log(item)
        this.$urouter.navigateTo({
          url: '/pages/order/afterorder/afterorder-apply/index',
          params: {
            sku_id: item.sku_id,
            order_sn: item.order_sn,
            goods_id: item.goods_id,
            status: item.status,
            index: this.index,
            order_type: item.order_type,
            back:2
          }
        });
      },
      /**
       * 删除订单
       */
      delOrder() {
        let that = this;
        this.$util.showModal({
          title: global.i18n['提示'],
          content: global.i18n['确认删除吗？'],
          success: function (res) {
            if (res.confirm) {
              that.$api.post(global.apiUrls.delAfterSale, {
								id: that.id
							}).then(result => {
								if (result.data.code == 1) {
									that.$message.info(that.i18n['删除成功']);
									uni.$emit('onPageUpdata', {
										type: 7, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单， 7: 删除售后订单
										index: this.itemIndex,
									})
									uni.$emit('onOrederDetailPageUpdata');
									setTimeout(() => {
										uni.navigateBack();
									}, 500);
								} else {
									that.$message.info(result.data.msg);
								}
							}).catch(err => {
								console.log(err);
							});
            }
          }
        })
      },
      /**
       * 查看物流
       */
      lookLog() {
        uni.navigateTo({
          url: '/pages/order/orderdetail/express-delivery/index?server_no=' + this.afterInfo.server_no
        })
      },
      /**
       * @description copy复制
       * @param {String} data 数据
       */
      copyInfo(data) {
        let that = this;
        uni.setClipboardData({
          data,
          success: function () {
            that.$message.info(this.i18n['复制成功']);
            // console.log('success');
          }
        });
      },
      /**
       * @description 退货查询物流新信息
       */
      getingPhysical() {
        this.$api
          .post(global.apiUrls.postOrderLogs, {
            order_sn: this.afterInfo.order_sn,
            server_no: this.afterInfo.server_no
          })
          .then(res => {
            console.log('物流信息', res.data);
            if (res.data.code == 1) {
              this.express_name = res.data.data.ShipperCode;
              this.express_no = res.data.data.OrderCode || 0;
              this.physical = res.data.data.Traces.reverse();
            } else {
            }
          });
      },
      // 预览图片
      previewImage(index) {
        uni.previewImage({
          urls: this.afterInfo.refund_picture,
          current: index
        });
      },
      //联系客服
      toCustomer() {
	this.$urouter.navigateTo('/pages/index/contactUs/index')
        return
	// 基础版本不需要此客服，暂时屏蔽
        this.$urouter.navigateTo({
          url: '/pages/service-message/service/service-detail/index',
          params: {
            kid: 1,
            goods_id: this.goods_id,
            activity_id: this.activity_id || 0
          }
        });
      },
      // 去详情页
      navToDetail() {
        this.$urouter.navigateTo({
          url: '/pages/goods/goodsdetail/goods-detail/index',
          params: {
            goods_id: this.afterInfo.goods_id,
            sku_id: this.afterInfo.sku_id
          }
        });
      },
      // 取消售后
      cancelAfter() {
        let that = this;
        this.$util.showModal({
          title: global.i18n['提示'],
          content: global.i18n['确认取消吗？'],
          success: (res) => {
            if (res.confirm) {
              that.$api.post(global.apiUrls.getGoodsAfterSaleCentel, {
								id: that.id
							}).then(res => {
								if (res.data.code == 1) {
									this.backSuccessShow = true;
									// 通知列表页面更新数据
									uni.$emit('onPageUpdata', {
										type: 6, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，5: 评论， 6: 提交售后
									});
									// 通知详情页面更新数据
									uni.$emit('onOrederDetailPageUpdata');
									that.getData();
								} else {
									this.$message.info(res.data.msg);
								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
            }
          }
        })

      },
      // 提交物流信息
      sendLog() {
        this.$urouter.navigateTo({
          url: '/pages/order/afterorder/afterorder-sendback/index',
          params: {
            id: this.id,
            goods: JSON.stringify(this.goodsInfo)
          }
        });
      },
      //
      getData() {
        let that = this;
        that.$api
          .post(global.apiUrls.getGoodsAfterSaleDetaile, {
            id: that.id
          })
          .then(res => {
            if (res.data.code == 1) {
							this.initSteps = true
              let data = res.data.data;
							this.afterInfo = res.data.data;
							this.goodsInfo = {
								goods_name: this.afterInfo.goods_name,
								goods_thumb: this.afterInfo.goods_thumb,
								num: this.afterInfo.num,
								sku_name: this.afterInfo.sku_name,
								sku_id: this.afterInfo.sku_id,
								refund_money: this.afterInfo.refund_money
							}
							if (that.afterInfo.refund_type == '1') {
							  that.steps = [
							    {
							      title: this.i18n['提交申请']
							    },
							    {
							      title: this.i18n['商家审核']
							    },
							    {
							      title: this.i18n['退款完成']
							    }
							  ];
							} else if (that.afterInfo.refund_type == '2') {
							  that.steps = [
							    {
							      title: this.i18n['提交申请']
							    },
							    {
							      title: this.i18n['商家审核']
							    },
							    {
							      title: this.i18n['寄回商品']
							    },
							    {
							      title: this.i18n['退款完成']
							    }
							  ];
							} else if (that.afterInfo.refund_type == '3') {
							  that.steps = [
							    {
							      title: this.i18n['提交申请']
							    },
							    {
							      title: this.i18n['商家审核']
							    },
							    {
							      title: this.i18n['商家收货']
							    },
							    {
							      title: this.i18n['换货']
							    },
							    {
							      title: this.i18n['完成']
							    }
							  ];
							  // that.getingPhysical();
							}
              this.refund_money = data.refund_money;
              this.refund_time = data.refund_time;
              this.refund_account = data.refund_account || '';
              that.filterStatus(data.status);
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      /**
       * @description 步骤器当前步数  -2售后取消 -1商家驳回 0等待商家处理 1商家同意 2商家已收货 3退款 4商家已发货
       */
      filterStatus(status) {
        console.log('步骤器==>', status);
        let that = this;
        switch (Number(status)) {
          case -2:
            // that.statusStr = global.i18n['售后关闭'];
            that.speed = 1;
            break;
          case -1:
            // that.statusStr = global.i18n['商家已驳回,如有疑问请联系商家客服'];
            // that.steps = [
            //   {
            //     title: global.i18n['提交申请']
            //   },
            //   {
            //     title: global.i18n['商家驳回']
            //   }
            // ];
            that.speed = 1;
            break;
          case 0:
            that.statusStr = global.i18n['请等待商家处理'];
            that.speed = 0;
            break;
          case 1:
            if (that.afterInfo.refund_type == '1') {
              // that.statusStr = global.i18n['商家已同意您的售后申请,将在(1-3)工作日内退款'];
            } else {
              // that.statusStr = global.i18n['商家已同意您的售后申请,请尽快寄回商品'];
            }
            that.speed = 1;
            if(that.afterInfo.express_no) that.speed = 2;
            break;
          case 2:
            // that.statusStr = global.i18n['商家已收货,将在(1-3)工作日处理'];
            that.speed = 2;
            break;
          case 3:
            if (that.afterInfo.refund_type == 1) {
              that.speed = 3;
            }
            that.statusStr = global.i18n['售后已完成'];
            that.speed = 4;
            break;
          case 4:
            if (that.afterInfo.refund_type == '3') {
              that.speed = 3;
            }
            // that.statusStr = global.i18n['商家已发货,感谢您对本平台的支持'];
            break;
        }
      },
			motifyAfter(item) {
				this.$urouter.navigateTo({
				  url: '/pages/order/afterorder/afterorder-apply/index',
				  params: {
				    sku_id: item.sku_id,
				    order_sn: item.order_sn,
				    goods_id: item.goods_id,
				    status: item.status,
				    index: this.index,
				    order_type: item.order_type,
				    back:2,
						server_no: item.server_no,
				  }
				});
			}
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    padding-bottom: 150rpx;
    overflow: hidden;
  }

  .text-2f {
    color: #2f98fe;
  }

  .margin-top-8 {
    margin-top: 8rpx;
  }

  .margin-top-10 {
    margin-top: 10rpx;
  }

  .margin-top-16 {
    margin-top: 16rpx;
  }

  .margin-top-14 {
    margin-top: 14rpx;
  }

  .padding-lr-24 {
    padding: 0 24rpx;
  }

  .margin-lr-24 {
    margin: 0 24rpx;
  }

  .img-wrap {
    width: 160rpx;
    height: 160rpx;
    margin-right: 10rpx;
  }

  .backAddress {
    padding: 32rpx 24rpx;
  }

  .text-4d {
    color: #4DC777;
  }

  .fu-bgcred1 {
    width: 100%;
    height: 240rpx;
    padding-top: 48rpx;
    position: relative;

    .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 240rpx;

    }
  }

  .block-200 {
    width: 200rpx;
    min-width: 200rpx;
    height: 200rpx;
    min-height: 200rpx;
    border-radius: 16rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .radius-16 {
    border-radius: 16rpx;
  }

  .add {
    // background: $bgtheme !important;
    // color: $uni-text-color-inverse;
    width: 170rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #F6F6F6;
    border-radius: 50px;
    font-size: 24rpx;
    color: #333333;
    font-weight: 400;
    text-align: center;
    border: none;
  }

  .cu-btn[class*="line"]::after {
    border: none;
  }

  .list-item {
    word-break: break-all;

    .title {
      display: inline-block;
      width: calc(4em + 40rpx);
      font-size: 24rpx;
      color: #999999;
      font-weight: 400;
      flex-shrink: 0;
    }
  }

  .list-item+.list-item {
    margin-top: 32rpx;
  }

  .bottom-action {
    width: 100%;
    padding: 0 32rpx;
    background-color: #ffffff;
    height: 100rpx;
    height: calc(100rpx + constant(safe-area-inset-bottom));
    height: calc(100rpx + env(safe-area-inset-bottom));
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 99;
  }

  .word-break-all {
    word-break: break-all;
  }

  // 换货 start
  .fu-back-acrgo {
    padding: 0 32rpx 0 32rpx;
    overflow: hidden;
    border-radius: 20rpx;

    .cu-timeline>.cu-item {
      padding: 30rpx 30rpx 30rpx 68rpx;
    }

    .cu-timeline>.cu-item::before {
      left: 0;
    }

    .cu-timeline>.cu-item::after {
      left: 24rpx;
    }
  }

  // 换货 end
  .uni-steps {
    position: relative;
    z-index: 11;
  }

  .comment-title-1 {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    padding-bottom: 24rpx;
    margin-bottom: 24rpx;
    position: relative;

    &::before {
      content: '';
      width: 100%;
      height: 1px;
      background: #EEEEEE;
      transform: scaleY(0.5);
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }

  .comment-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    padding-bottom: 24rpx;
    margin-bottom: 24rpx;
    text-indent: 22rpx;
    position: relative;

    &::before {
      content: '';
      width: 100%;
      height: 1px;
      background: #EEEEEE;
      transform: scaleY(0.5);
      position: absolute;
      left: 0;
      bottom: 0;
    }

    &::after {
      content: '';
      width: 6rpx;
      height: 30rpx;
      border-radius: 4rpx;
      background: $bgtheme;
      ;
      position: absolute;
      left: 0;
      top: 8rpx;

    }
  }

  .kefu {

    .img {
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
      margin-top: -4rpx;
    }
  }

  .back-success-wrap {
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      background: rgba(0, 0, 0, 0.3);
    }

    .back-content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
      width: 540rpx;

      // height: 424rpx;
      .back-content-info {
        border-radius: 25rpx;
        width: 540rpx;
        height: 356rpx;
        padding: 56rpx 0;

        .text {
          font-size: 150rpx;
        }
      }
    }
  }

  .text-62 {
    font-size: 60rpx;
    margin-top: 48rpx;
  }

  .afterStatus {
    position: relative;
    z-index: 11;
    margin-top: -30rpx;

    &.up {
      margin-top: -180rpx;
    }
  }

  .posZindex {
    position: relative;
    z-index: 11;
  }
</style>
